import MyIcon from '@/components/MyIcon';
import { Timeline } from 'antd';
import { useContext } from 'react';
import { WorkflowCheckRecordContext } from '../common';
export const WorkflowNotHandView: React.FC<WorkflowChedkRecordAPI.IWorkflowNotHandView> = ({
  notHandTaskListMemo,
}) => {
  const { prefixCls } = useContext(WorkflowCheckRecordContext);

  /**
   *  处理节点间用户数据
   * @param dealerKey 岗位 & 用户 id
   * @param dealerName 岗位 & 用户 name
   * @returns
   */
  const handNodeUserList = (dealerName: string[]) => {
    let allUserList: string[] = [];
    dealerName?.forEach((itemName: any) => {
      let [postName, userName] = itemName?.split('|');
      const taskNameStr: string = `【${postName}】 ${userName}`;
      allUserList?.push(taskNameStr);
    });
    const taskNodeTitle: string = allUserList?.join('，');
    return taskNodeTitle;
  };

  return (
    <>
      {notHandTaskListMemo?.map((itemHand: any) => {
        /**
         * 获取到处理人的数据
         */
        const userListName: string[] = itemHand?.postDealerName
          ? itemHand?.postDealerName
              ?.split(',')
              ?.filter((itemUserName: any) => itemUserName)
          : [];
        const taskUserName = handNodeUserList(userListName);

        return (
          <Timeline.Item
            key={`${itemHand?.id}`}
            dot={
              itemHand?.endTime && (
                <MyIcon
                  type="icon-time-circle"
                  style={{
                    fontSize: '18px',
                    color: 'red',
                  }}
                />
              )
            }
            color="red"
          >
            <div className={prefixCls + 'taskNodesTitleBox'}>
              <span className={prefixCls + 'taskNodesTitleBox-nodesUserBox'}>
                {taskUserName}
              </span>
              <span
                className={prefixCls + 'taskNodesTitleBox-nodesTaskResult'}
                style={{
                  color: '#faad14',
                }}
              >
                未处理
              </span>
            </div>
          </Timeline.Item>
        );
      })}
    </>
  );
};
